<script setup lang="ts">
// const input = document.querySelector('input')
/**
 事件处理与TS
 */
// 补充: TS中如何获取事件对象的类型?
// 方式1: 把鼠标放在事件上可以获取 @change
// 方式2: 可以在事件处理函数小括号中加$event, 然后鼠标进入看类型
const change = (event: Event) => {
  // 类型断言
  console.log((event.target as HTMLInputElement).value);
}

const handleClick = (event: MouseEvent) => {
  console.log((event.target as HTMLButtonElement));
}
</script>

<template>
  <input @change="change" type="text" value="你好呀">
  <button @click="handleClick">点我</button>
</template>

<style scoped></style>
